import React, { useState } from 'react'
import MdEditor from 'react-markdown-editor-lite';
// import style manually
import ReactMarkdown from 'react-markdown'
import 'react-markdown-editor-lite/lib/index.css';
const Com = (props) => {
  const [detail, setDetail] = useState('')
  return (
    <div style= {{ width: '100%'}}>
      markdown编辑器

      <MdEditor 
        style={{ height: '500px' }} 
        renderHTML = { (text) => {
          return (
            <ReactMarkdown>
              { text }
            </ReactMarkdown>
          )
        }}
        onChange={ ({ html, text }) => {
          // console.log('handleEditorChange', html, text);
          console.log('html', html);
          console.log('text', text);
          setDetail(html)
        }} >
        </MdEditor>
        <div dangerouslySetInnerHTML={{ __html: detail}}></div>
    </div>
  )
}
export default Com

// cnpm i react-markdown -S  阅读器 -- 预览
// cnpm i react-markdown-editor-lite -S  编辑器